<template>
  <a-carousel
    class="carousel"
    ref="carousel"
    :dots="false"
    :dot-position="'right'"
    :autoplay="true"
    :autoplaySpeed="8000"
    :easing="'ease'"
    v-bind="attrs"
    v-if="list && list.length"
  >
    <div v-for="item of list" :key="item.key">
      <slot :scope="item" :index="item.index" />
    </div>
  </a-carousel>
  <div v-else style="display: flex; justify-content: center; align-items: center; height: 100%">
    <empty />
  </div>
</template>

<script>
import Empty from '../Empty/index.vue';

function getKey(i) {
  return (Number(String(Math.random()).slice(2)) + Date.now() + i).toString(36);
}
export default {
  name: 'AntdCarousel',
  components: { Empty },
  props: {
    direction: { type: String, default: 'vertical' /* horizontal,vertical */ },
    dataList: { type: Array, default: () => [] },
  },
  computed: {
    attrs() {
      const dir = { horizontal: 'bottom', vertical: 'right' };
      return Object.assign({}, this.$attrs, {
        dotPosition: this.$attrs.dotPosition || dir[this.direction] || dir.vertical,
      });
    },
    list() {
      return this.dataList.map((item, index) => {
        return Object.assign({}, item, { key: getKey(index), index: index });
      });
    },
  },
};
</script>

<style></style>
